<template>
	<div>
		<Breadcrumb>
			<BreadcrumbItem>账号管理</BreadcrumbItem>
			<BreadcrumbItem>机器组列表</BreadcrumbItem>
			<BreadcrumbItem>查看机器组</BreadcrumbItem>
		</Breadcrumb>
		<Form>
			<FormItem>
				<Button type="primary" @click="add" style="margin-right: 10px">分配操作员</Button>
				<Button type="primary" @click="$router.go(-1)" style="margin-right: 10px">返回</Button>
			</FormItem>
		</Form>

		<div class="form_box">
			<Table :columns="columns" :data="tableData">
				<template slot-scope="{ row }" slot="option">
					<Button type="success" size="small" style="margin-right: 5px" @click="add2(row)">分配机器</Button>
					<Button type="error" size="small" style="margin-right: 5px" @click="remove(row)">删除</Button>
				</template>
			</Table>
		</div>
		
		
		<Modal v-model="modal1" title="分配操作员" @on-ok="confirm" @on-cancel="cancel" :mask-closable="false">
			<Form :label-width="110">
		
				<FormItem label="操作员">
					<Select clearable  placeholder="请选择" style="width: 120px;">
						<Option value="1">操作员4</Option>
						<Option value="2">操作员5</Option>
					</Select>
				</FormItem>
		
			</Form>
		</Modal>
		
		<Modal v-model="modal2" title="分配机器" @on-ok="confirm" @on-cancel="cancel" :mask-closable="false">
			<Form :label-width="110">
		
				<FormItem label="机器">
					<Select clearable  placeholder="请选择" style="width: 120px;">
						<Option value="1">机器4</Option>
						<Option value="2">机器5</Option>
					</Select>
				</FormItem>
		
			</Form>
		</Modal>
		
		
	</div>
</template>

<script>
	import expandRow from './columns.vue';
	export default {
		data() {
			return {
				modal1:false,
				modal2:false,
				columns: [{
						type: 'expand',
						width: 50,
						render: (h, params) => {
							return h(expandRow, {
								props: {
									row: params.row
								}
							})
						}
					},
					{
						title: '操作员',
						key: 'name',

					},
					{
						title: "操作",
						slot: "option",
						minWidth: 200,
						align: "center",

					}
				],
				tableData: [{
						"id": "21",
						"name": "操作员1",
						"equipment":[
							{
								name:'机器1',
								id:1
							},
							{
								name:'机器2',
								id:2
							}
						]
					}
				
				]
			}
		},
		methods: {
			confirm(){
				this.modal1= false
				this.modal2= false
				this.$Message.success("操作成功");
			},
			cancel(){
				
			},
			add2(){
				this.modal2= true
			},
			add() {
				this.modal1= true
			},
			remove() {
				this.$Modal.confirm({
					title: "确定要删除该操作员吗？",
					onOk: () => {
						this.$Message.success("删除成功");
					},
					onCancel: () => {}
				});
			},
		}
	}
</script>

<style>
</style>
